﻿@page
@{ Layout = "_Layout"; }

@section Styles{
    <style>
        .el-upload, .el-upload-dragger {
            width: 150px;
        }

        .avatar {
            height: 158px;
            display: block;
        }
    </style>
}
<el-card>
    <div slot="header" class="clearfix">
        <span>{{ userId === 0 ? "新增" : "修改" }}管理员账号</span>
        <el-button style="float: right;padding:3px 0;" type="text" v-on:click="utils.closeLayer(false)"><i class="el-icon-close"></i></el-button>
    </div>
    <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-180) + 'px' }">
        <div style="margin-right:18px;">
            <el-form :size="euiSize" v-on:submit.native.prevent ref="form" :model="form" status-icon label-width="140px">
                <el-form-item label="账号" prop="userName" :rules="[{ required: true, message: '请输入账号' }]">
                    <el-input v-model="form.userName" :disabled="userId > 0"></el-input>
                    <small class="tips">账号用于登录系统</small>
                </el-form-item>
                <el-form-item v-if="userId === 0" label="密码" prop="password" :rules="[{ required: true, message: '请输入密码' }]">
                    <el-input v-model="form.password" type="password" name="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-if="userId === 0" label="确认密码" prop="confirmPassword" :rules="[{ required: true, message: '请输入确认密码' }, { validator: validatePass }]">
                    <el-input v-model="form.confirmPassword" type="password" name="confirmPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="displayName" :rules="[{ required: true, message: '请输入姓名' }]">
                    <el-input v-model="form.displayName"></el-input>
                </el-form-item>
                <el-form-item label="组织" prop="organName" :rules="[{ required: true, message: '请选择组织' }]" v-if="!isSelf && userId!==1">
                    <el-input placeholder="请选择组织" v-model="form.organName" :disabled="true">
                        <el-button slot="append" icon="el-icon-thumb" v-on:click="btnSelectOrganClick">选择组织</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="mobile" :rules="[{ validator: utils.validateMobile, message: '字段必须是有效的手机号码' }]">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email" :rules="[{ type: 'email', message: '请输入正确的邮箱地址' }]">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload :action="uploadUrl"
                               :show-file-list="false"
                               :headers="{Authorization: 'Bearer ' + $token}"
                               list-type="picture-card"
                               :before-upload="uploadBefore"
                               :on-progress="uploadProgress"
                               :on-success="uploadSuccess"
                               :on-error="uploadError"
                               :on-remove="uploadRemove"
                               :multiple="false">
                        <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
                        <i v-else class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <template v-if="(userId===0 || (creatorId===adminId) || adminId===1) && userId!==1">
                    <el-divider></el-divider>
                    <el-form-item label="管理权限" prop="auth" :rules="[{ required: true, message: '请选择管理权限' }]">
                        <el-select v-model="form.auth" placeholder="请选择管理权限">
                            <el-option label="请选择管理权限" value=""></el-option>
                            <el-option v-for="auth in auths"
                                       :key="auth.value"
                                       :label="auth.label"
                                       :value="auth.value">
                            </el-option>
                        </el-select>
                        <div>
                            <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
                                <div slot="content">
                                    超级管理员：管理所有资源。<br />
                                    单位管理员：管理单位内所有资源。<br />
                                    普通管理员：管理单位内资源，需要分配数据权限，需要分配角色。<br />
                                </div>
                                <span class="tips">
                                    <i class="el-icon-info" style="margin-right:3px;"></i>权限说明
                                </span>
                            </el-tooltip>
                        </div>
                    </el-form-item>
                    <template v-if="form.auth==='AdminNormal'">
                        <el-form-item label="数据权限" prop="authData" :rules="[{ required: true, message: '请选择数据权限' }]">
                            <el-select v-model="form.authData" placeholder="请选择数据权限">
                                <el-option label="请选择数据权限" value=""></el-option>
                                <el-option v-for="auth in authDatas"
                                           :key="auth.value"
                                           :label="auth.label"
                                           :value="auth.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-checkbox-group v-model="roleChecked" size="small">
                                <el-checkbox :label="role.id" v-for="role in roles">{{ role.name }}</el-checkbox>
                            </el-checkbox-group>
                            <div>
                                <el-button icon="el-icon-plus" :size="euiSize" v-on:click="btnAddRoleClick">新增角色</el-button>
                            </div>
                        </el-form-item>
                    </template>
                </template>

            </el-form>
            <div style="height:200px;"></div>
        </div>
    </el-scrollbar>
</el-card>
<el-row align="center" style="margin-top:18px;">
    <el-col :span="24" align="center">
        <el-button icon="el-icon-check" :size="euiSize" type="primary" v-on:click="btnSubmitClick">确 定</el-button>
        <el-button icon="el-icon-close" :size="euiSize" v-on:click="utils.closeLayerSelf">取 消</el-button>
    </el-col>
</el-row>

@section Scripts{
    <script src="/sitefiles/assets/js/admin/settings/administratorsLayerProfile.js" type="text/javascript"></script>
}